<template>
  <div class="location">
    <my-header title='库位定位'/>
    <div class="location-box">
      <mu-text-field v-model="locationNumber" ref="location" class="location-input" placeholder="请输入库位编号..."></mu-text-field>
      <br/>
      <mu-paper class="location-paper" :z-depth="5">
        <h3>当前库位经纬度</h3>
        <dl>
          <dt>经度：{{longitude}}</dt>
        </dl>
        <dl>
          <dt>纬度：{{latitude}}</dt>
        </dl>
      </mu-paper>
      <div class="location-btn">
        <mu-button :color="colorBtn" large class="btn" @click="watchLocation">{{txt}}</mu-button>
        <mu-button color="primary" large class="btn" @click="submit">确认提交</mu-button>
      </div>
    </div>
  </div>
</template>

<script>
import myHeader from "@/components/header"
import api from "@/common/api"
export default {
  name: '',
  components:{myHeader},
  data () {
    return {
      locationNumber: "", // 库位编号
      latitude: null, // 纬度
      longitude: null, // 经度
      watchMarks: null, // 监听定位
      txt: "开始定位",
      colorBtn: "primary",
      requestOnce: true
    }
  },
  methods: {
    watchLocation () {
      if(this.watchMarks){
        this.stopLocation();
      }else{
        this.getLocation();
      }
    },
    submit () {
      if(!this.latitude || !this.longitude){
        // 提示
        this.Toast({
            duration: 1500,
            mask: true,
            message: "请先获取经纬度"
        });
        return false;
      }
      // 提示
      this.Toast.loading({
          duration: 0,
          mask: true,
          message: "- 提交中 -"
      });
      /* 发送post请求 */
      let data = Object.assign({},this.$store.state.user,{
        "content": {
          "code": this.locationNumber, // 库位编码
          "latitude": this.latitude, // 经度
          "longitude": this.longitude // 纬度
        }
      });
      if(this.requestOnce){
        this.requestOnce = false;
        this.common.reqData(api.app('setLocation'), data, res=>{
          this.requestOnce = true;
          if(res.data.status == 100){
            this.Toast.success({
                duration: 2000,
                mask: true,
                message: '提交成功'
            });
            this.stopLocation();
            this.longitude = null;
            this.latitude = null;
          }else{
            // 提示
            this.Toast.fail({
                duration: 2000,
                mask: true,
                message: res.data.msg
            });
          }
        },err =>{
          this.requestOnce = true;
          console.log(err)
        });
      }
    },
    getLocation () {
      let _this = this;
      this.txt = "停止定位";
      this.colorBtn = "secondary";
      if(window.plus){
        // this.watchMarks = plus.geolocation.watchPosition(function(p) {
        //   // 坐标转换
        //   plus.maps.Map.convertCoordinates(new plus.maps.Point(p.coords.longitude, p.coords.latitude), {}, function(event){
        //     var point = event.coord;  // 转换后的坐标值
        //     _this.latitude = point.latitude;
        //     _this.longitude = point.longitude;
        //   },function(e){
        //     alert("Failed:"+JSON.stringify(e));
        //   });
        // }, function(e){
        //   console.log('Geolocation error: ' + e.message);
        // });
        this.watchMarks = plus.geolocation.watchPosition(function(p){
          _this.latitude = p.coords.latitude;
          _this.longitude = p.coords.longitude;
        }, function(e){
          console.log('定位错误: ' + JSON.stringify(e));
          alert('定位错误: '+ e.message);
        }, {
          coordsType: "bd09ll",
          enableHighAccuracy: true,
          geocode: true,
          provider:'baidu'
        });
      }
    },
    stopLocation () {
      // 成功后取消监听
      this.txt = "开始定位";
      this.colorBtn = "primary";
      window.plus ? plus.geolocation.clearWatch(this.watchMarks) : 0;
      this.watchMarks = null;
    }
  },
  beforeDestroy () {
    this.stopLocation();
  },
  mounted () {
    // 获取焦点
    this.$refs.location.$el.children[0].getElementsByTagName('input')[0].focus();
    window.plus ? plus.key.hideSoftKeybord() : 0;
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.location-box{
  width: 90%;
  margin: 0 auto 0;
  padding: 20px 0 0;
}
.location-box .mu-input{
  width: 100%;
}
.location-input{
  font-size: 1.75em;
  height: 2.5em;
}
.location-paper{
  padding: 20px 10px;
  margin: 2em 0 4em;
}
.location-paper h3{
  font-size: 1.45em;
  color:#00BFFF;
  text-align: center;
}
.location-box dl{
  margin: 18px 0 0;
}
.location-box dt{
  font-size: 1.25em;
}
.location-btn{
  display: flex;
  justify-content: space-around;
}
.btn{
  font-size: 1.25em;
}
</style>
